<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<!--使用veu开发前端-->
	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

     <!-- 使用bootStrap引入文件时需要注意顺序，最好按照以下顺序引入 -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/popper.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>


</head>
<body>
	<!--head，分为3行-->
	<div class="container-fluid"  style="height: 800px;width:100%; border:1px solid grey; background-image: url('images/login-bg-2.jpg');">
		<div class="row" style="height: 20%"></div>
		<div class="row" style="height: 50%;" >
			<div class="col-sm-3"></div>
			<!-- <div class="col-sm-1"></div> -->
			<div class="col-sm-3" style="border: 1px solid grey; width: 100px; background-color: white;" >
			 <div class="row"id="accountAndPwdAndCode">
			 	<div class="col-sm-2"></div>
			 	<div class="col-sm-10">
				<div class="row"><font size="6px;">欢迎登录</font></div>
				<br>
				<div class="row"><font size="4px;">用户名：</font></div>
				<div class="row">
				<input type="text" v-model="account" size="25px;">
				</div>
				<br>
				<div class="row"><font size="4px;">密码：</font></div>
				<div class="row">
					<input type="text" v-model="pwd" size="25px;">
				</div>
				<br>
				<div class="row">  验证码：<input type="text" v-model="code" style="width: 80px;"><p id="sub01"></p><br></div>
			        <img alt="验证码" src="code/getCode" onclick="changeCode()" id="checkcode"><br>
				    <br>
				<div class="container"><button @click="login()" class="btn btn-success" style="width:150px;">登录</button></div>
			 	</div>

			  </div>


			</div>
			<div class="col-sm-3" style="background-image: url('images/logo.png'); background-size: 100% 100%; border: 1px solid grey;">没有账户，请前往<a href="regist.html">注册</a>页面</div>
			<div class="col-sm-3"></div>

		</div>
		<div class="row" style="height: 30%"></div>
		

	</div>

	<!--使用veu与后台进行交互，发送请求到后台-->
	<script type="text/javascript">
		
		new Vue({
			el:"#accountAndPwdAndCode",
			data:{
				account:"",
				pwd:"",
				code:""
			},
/*			mouted(){//当页面加载完毕时，发送请求
               axios.post('user/login')
               .then(res =>){
               	  alert("发送请求返回来的数据");
               	  console.info(res);

               }
			},*/
			methods:{
				login:function(){
					//alert(this.account+","+this.pwd);
					// 1 得到用户输入的账户和密码，发送登录请求
					var param = new URLSearchParams();
					param.append('account',this.account);
					param.append('password',this.pwd);
					param.append('code',this.code);
					 axios.post('user/login',param
					 ).then(res =>{
						 //alert(res);
						 console.info(res);						 
						 //登录成功跳转页面
				 		if(res.status == 200 && res.data.status == "success"){
				 			window.location = 'index.html';
						} 

					 })
					    
					// 2 发送到后端，进行账号和密码的判断
					// 3 如果账号和密码正确，跳转到首页
				},
/* 			changeCode:function(){
				alert("sfsfs");
 				axios.get('/getCode?+Math.random()').then(res =>{
					alert(res);
					
				}) 
			} */
			}
		});
	      //刷新验证码
	      function changeCode(){
	    	  
	    	  $("#checkcode").prop("src","code/getCode?"+Math.random());//重新设置url 重新发送请求，获取图片
	      }
	</script>


</body>
</html>